<template>
	<view class="shareDetails">
		<!-- 立即邀请 -->
		<view class="flooter-btn">
			<button open-type="share" class="btn-share"> 立即分享 </button>
		</view>
		
		<!-- 标题栏 -->
		<!-- <van-nav-bar title="我的邀请" left-arrow @click-left="onClickLeft" class="shareDetails-title" /> -->
		<!-- 通知 -->
		<van-notice-bar left-icon="volume-o" v-bind:text="textValue" @replay="getOneRecommendInfo" :scrollable="true" />
		<!-- 邀请奖励背景图 -->

		<view class="box ">

			<van-row>
				<van-col class="invite-img"><image src="/static/images/share/InviteImg.png"></image></van-col>
			</van-row>
			<!-- 奖励规则 -->
			<view class="header">
				<view class="header-title">
					<image src="/static/images/share/rewardRules.png" style="width:160px; height: 40px;"></image>
					<view class="header-title_text">·奖励规则·</view>
				</view>
				<van-row class="header-content-box" style="width: 100%;">
					<van-col class="header-content">1、添加客服微信奖励1天VIP</van-col>
					<van-col class="header-content">2、首次分享至朋友圈即送7天VIP，点赞超30即送15天VIP</van-col>
					<van-col class="header-content">3、当邀请好友充值VIP ，您和好友双方将获得同等VIP额外奖励,奖励明细如下：</van-col>
					<van-col class="header-content"
						style="width:100vw;text-align: center;color: red;">1.充值1个月VIP，奖励你和好友10天VIP</van-col>
					<van-col class="header-content"
						style="text-align: center;color: red;">2.充值半年VIP，奖励你和好友60天VIP</van-col>
					<van-col class="header-content"
						style="text-align: center;color: red;">3.充值一年VIP，奖励你和好友150天VIP</van-col>
					<van-col class="header-content" style="text-align: center">同一家长端账号可以邀请多位好友，赠送不封顶。</van-col>
					<van-col class="header-content"
						style="margin-top: 5px;">4.发展集团（学校）用户或其他商务合作联系钟先生13006190270</van-col>
				</van-row>
				<view class="header-customer">
					<van-col>
						<van-col class="header-img">
							<image src="/static/images/share/kefu1.png" width="150"
								height="150"></image></van-col>
						<view class="img-txt">客服一号</view>
						<!-- <van-col>点击保存二维码</van-col> -->
					</van-col>
					<van-col>
						<van-col class="header-img">
							<image src="/static/images/share/kefu2.png" width="150" height="150"></image>
						</van-col>
						<view class="img-txt">客服二号</view>
					</van-col>
				</view>
			</view>
		</view>

		<!-- 概览 -->
		<view class="main">
			<!-- 概览title -->
			<view class="main-title">·邀请概览·</view>

			<!-- 概览内容 -->
			<view class="main-box">
				<view class="main-box_name mb-1">
					<view class="mr-1 br-tf-10">注册人数</view>
					<view class="mr-1 ">充值人数</view>
					<!-- <van-col class="mr-1">充值金额</van-col>
               <van-col class="mr-1">提成</van-col> -->
					<view class="br-tr-10">奖励VIP天数</view>
				</view>

				<view class="main-box_value">
					<view class="mr-1 br-bf-10">{{ overviewEntity.invitePersonNumber }}</view>
					<view class="mr-1">{{ overviewEntity.topUpPersonTotalNumber }}</view>
					<!-- <van-col class="mr-1">{{overviewEntity.inviteMoney}}</van-col>
               <van-col class="mr-1 ">{{ overviewEntity.gainMoney }}</van-col> -->
					<view class="br-br-10">{{ overviewEntity.gainVipDay }}</view>
				</view>
			</view>

			<!-- 体现按钮 -->
			<!-- <van-col class="main-footer"><van-button  class="main-footer-button" plain color="#00C47B" @click="skipPayment()">提现</van-button></van-col> -->
		</view>

		<!-- 明细 -->
		<van-row class="footer">

			<!-- 明细title -->
			<view span="24" class="footer-title">·奖励明细·</view>

			<!-- 奖励明细和排行榜 -->
			<view class="footer-main">
				<van-tabs :active="active" @change="onClickTab" title-active-color="#fff" title-inactive-color="#2BC888"
					color="#fff">
					<van-tab title="奖励明细">
						<view>
							<view style="display: flex;" class="footer-main-tabs-tab_name">
								<view style="flex: 1; text-align: center;" class="footer-main-tabs-tab__content">序号
								</view>
								<view style="flex: 1; text-align: center;" class="footer-main-tabs-tab__content">手机号
								</view>
								<view style="flex: 1; text-align: center;" class="footer-main-tabs-tab__content">类型
								</view>
								<view style="flex: 1; text-align: center;" class="footer-main-tabs-tab__content">奖励
								</view>
							</view>

							<view>
								<view style="display: flex;" class="footer-main-tabs-tab_value"
									v-for="(item, index) in newRewardList" :key="index">
									<view class="item_value">{{ index + 1 }} </view>
									<view class="item_value"> {{item.mobile }}</view>
									<view class="item_value">{{ item.typeName }}</view>
									<view class="item_value r-color">{{ item.award }}</view>
								</view>
							</view>

						</view>

					</van-tab>
					<van-tab title="本月邀请排行">
						<view>
							<view style="display: flex;" class="footer-main-tabs-tab_name">
								<view class="footer-main-tabs-tab__content">序号</view>
								<view class="footer-main-tabs-tab__content">手机号</view>
								<view class="footer-main-tabs-tab__content">邀请人数</view>
							</view>
							<view>
								<view style="display: flex;" class="footer-main-tabs-tab_value"
									v-for="(item, index) in rankingList" :key="index">
									<view class="item_value">{{item.ranking }}</view>
									<view class="item_value"> {{item.username }}</view>
									<view class="item_value">{{ item.num }}</view>
								</view>
							</view>
						</view>
					</van-tab>
				</van-tabs>
			</view>
		</van-row>


	</view>
</template>
<script>
	import { ref, reactive, onMounted } from 'vue';
	import { homeServer } from "@/common/index"
	export default {
		data(){
			return {
				loading: false,
				finished: false,
				refreshing: false,
				current: 1,
				textValue:'',
				RDSTAUS: 0,
				RSTAUS: 1,
				active: 0,
				overviewEntity: {
					invitePersonNumber: 0,
					topUpPersonTotalNumber: 0,
					inviteMoney: 0,
					gainMoney: 0,
					gainVipDay: '0天'
				},
				userOverview : {
					data: [],
					message: '',
					status: ""
				},
				rewardDetails:{
					data: [],
					message: '',
					status: ''
				},
				newRewardList :[],
				ranking :{
					data: [],
					message: '',
					status: ''
				},
				rankingList:[],
				RecommendInfoList : [],
				shareCodeInfo: {}
			}
		},
		onShareAppMessage(res) {
			const shareCode = this.shareCodeInfo.sharecode
			if(res.from === 'button'){
				return {
					title:"一周家长管控",
					imageUrl:"",
					path:`/pages/login/index?shareCode=${shareCode}`
				}
			}
			return {
				title:"一周家长管控",
				imageUrl:"",
				path:`/pages/login/index?shareCode=${shareCode}`
			}
		},
		// onShareTimeline(res) { // 分享到朋友圈
		// 	return {
		// 		title:"一周家长管控",
		// 		imageUrl:"",
		// 		path:`/pagesC/share/index?shareCode=${shareCode}`
		// 	}
		// },
		onLoad() {
			// if(shareCode){
			// 	uni.navigateTo({
			// 		url:`/pages/login/index?shareCode=${shareCode}`
			// 	})
			// }
		},
		mounted() {
			uni.showShareMenu({
				withShareTicket:falsse, 
				menus:["shareAppMessage"] //  shareTimeline: 分享到朋友圈shareAppMessage： 发送给朋友
			}),
			this.getuserOverview();
			this.getrewardDetails();
			this.getRecommendInfo();
			this.getRanking();
			this.onLoad(0);
			this.GetAccessStatistics();
		},
		methods: {
			//  获取sharecode
			queryShareCode: async function(){
				try{
					const {data, status} = await homeServer.remainMoneyAndSharecode()
					console.log('获取分项码', data, status)
					if(status === '200'){
						this.shareCodeInfo = data
					}
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			},
			// 获取用户邀请概览
			getuserOverview: async function (){
				const { data } = await homeServer.queryUserOview();
				this.overviewEntity = data;
			},
			
			// 获取奖励明细
			 getrewardDetails: async function() {
				this.rewardDetails = await homeServer.queryRewardDetails();
			},
			
			// 获取用户排行榜
			 getRanking : async function (){
				const { data } = await homeServer.queryRanking();
				this.ranking = data
				this.rankingList = data;
			},
			
			// 获取通知栏内容
			 getRecommendInfo : async function() {
				let RecommendInfo = await homeServer.queryGetRecommendInfo({ url: '' });
				console.log("RecommendInfo", RecommendInfo)
				if (RecommendInfo !== undefined) {
					this.RecommendInfoList = RecommendInfo.data;
					this.textValue = this.RecommendInfoList[0] || '暂无通知'
				}
			},
			
			// 统计访问次数
			GetAccessStatistics: function () {
				// let token = route.query.token as string;
				// await homeServer.sendAccessStatistics()
			
			},
			
			// 奖励明细加载数据
			 loadData: function (dataRef , listRef , loadingRef, finishedRef, status, delay) {
				setTimeout(async () => {
					if (this.refreshing) {
						listRef = [];
						this.refreshing = false;
					}
					if (dataRef.data === undefined || dataRef.data === null) {
						loadingRef = false;
						finishedRef = true;
						return;
					}
					if (listRef.length !== 0) {
						listRef = [];
					}
					listRef = dataRef.data.slice(0, 20);
					loadingRef = false;
					if (listRef.length >= 0) {
						finishedRef = true;
					}
				}, delay);
			},
		    onLoad: function (status ) {
				// console.log("onload加载了");
			
				if (status === 0) {
					this.loadData(this.rewardDetails, this.newRewardList, this.loading, this.finished, status, 1000);
				}
				if (status === 1) {
					// console.log('refreshing的值', refreshing.value);
					this.ladData(this.ranking, this.rankingList, this.loading, this.finished, status, 200);
				}
			},
			
			//  刷新事件
			 onRefresh : function (status){
				// 清空列表数据
				this.finished = false;
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.refreshing = true;
				this.getuserOverview();
				this.getRanking();
				this.getrewardDetails();
				this.onLoad(status);
			},
			
			// 通知文字结束后调用
			getOneRecommendInfo: function (){
				if (this.current < this.RecommendInfoList.length) {
					this.textValue = this.RecommendInfoList[this.current];
					this.current++;
				} else {
					this.current = 1;
					this.textValue = this.RecommendInfoList[this.current];
				}
			},
			
			// 跳转支付
			 skipPayment: function (){
				// window.android.openCashActivity();
			},
			
			// 立即邀请跳转
			 skipInvite: function (){
				//    let shareCode = route.query.shareCode as string;
				//    let isApp = route.query.isApp as string;
				//    // console.log(shareCode);
				//    if(isApp === 'wx'){ // 现在是微信
				//       const shareData = {
				//          mode: 'wx',
				//          shareCode
				//       };
				//       console.log('wx', shareData)
				//       // 通过 postMessage 发送给小程序端
				//       window.postMessage(shareData, '*');
				//       try {
				//          uni?.postMessage({  
				//             data: {  
				//                mode: 'wx',
				//                shareCode
				//             }  
				//          }); 
			
				//          uni?.getEnv(function(res) {  
				//             console.log(res)
				//             if (res.plus) {  
				//                   console.log('当前环境为【5+App】');  
				//             } else if (res.miniprogram) {  
				//                   console.log('当前环境为【微信小程序】');  
				//             }  
				//          });  
			
				//       } catch (error) {
				//          console.log('uni error', error)
				//       }
			
			
				//       wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
				//          wx.updateTimelineShareData({ 
				//             title: '', // 分享标题
				//             link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				//             imgUrl: '', // 分享图标
				//             success: function () {
				//                // 设置成功
				//             }
				//          })
				//       });
				//       return
				//    }
			
				//    if (isApp === '2') {
				//       window.webkit.messageHandlers.openShareIOS.postMessage(shareCode);
				//    } else if(isApp === '3') {
			
				//    } 
				//    else {
				//       window.android.openShareActivity(shareCode);
				//    }
			
			},
			
			// 切换奖励明细和排行榜时触发事件
			onClickTab: function (){
				// console.log(active.value);
				// newRewardList.value.data = [];
				// rankingList.value=[];
				if (this.active === 1) {
					this.onLoad(this.RSTAUS);
				}
				if (this.active === 0) {
					this.onLoad(this.RDSTAUS);
				}
			}
		
		},
	}
	
	
</script>


<style lang="scss">
	.shareDetails {
		background-color: #FFFFFF;
		padding-bottom: 200upx;
		.notice-swipe {
			height: calc(40vw / 3.75);
			line-height: calc(40vw / 3.75);
		}

		.van-nav-bar {
			:deep(.van-icon) {
				color: #333333;
				font-size: calc(20vw / 3.75);
			}
		}

		.invite-img {

			.van-image {
				height: calc(250vw / 3.75);
				width: 100vw;
			}
		}

		.header {
			// position: absolute;
			// top:calc(170vw / 3.75);
			margin: 0 calc(12vw / 3.75) 0 calc(12vw / 3.75);
			// padding-bottom: calc(15vw / 3.75);
			background: rgba(0, 196, 123, 0.06);
			border-radius: calc(10vw / 3.75);
			min-height: 1200upx;
			padding: 0 20upx;

			.header-title {
				// width: 100vw;
				// float: left;
				// top: 0;
				width: calc(350vw / 3.75);
				height: calc(36vw / 3.75);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.header-title_text {
					position: absolute;
					left: calc(150vw / 3.75 - 4vw);
					color: #FFFFFF;
					font-size: calc(20vw / 3.75);
					font-weight: 500;
					font-family: PingFang SC-Heavy, PingFang SC;
				}

				.van-image {
					// width: calc(150vw / 3.75);
					// height: calc(36vw / 3.75);
				}
			}

			.header-content-box {
				// position: relative
				// height: calc(220vw / 3.75);
				// float: left;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-top: calc(10vw / 3.75);
				// align-items: flex-start;
			}

			.header-content {
				// margin-top: calc(15vw / 3.75);
				// margin-bottom: calc(19vw / 3.75);
				padding: 0 calc(17vw / 3.75);
				font-size: calc(14vw / 3.75);
				font-weight: 600;
				color: #333333;
				// flex: 0;
				// height: calc(30vw / 3.75);
				line-height: calc(28vw / 3.75);


			}

			.header-customer {
				display: flex;
				justify-content: space-around;
				margin-top: calc(20vw / 3.75);

				.header-img {
					width: calc(80vw / 3.75);
					height: calc(80vw / 3.75);
					margin-bottom: calc(8vw / 3.75);
				}

				.img-txt {
					text-align: center;
					font-size: calc(12vw / 3.75);
					font-weight: 600;
					color: #333333;
				}
			}

		}


		.main {
			width: calc(350vw / 3.75);
			margin: calc(20vw / 3.75) calc(12vw / 3.75) 0 calc(12vw / 3.75);

			.main-title {
				text-align: center;
				width: calc(350vw / 3.75);
				font-size: calc(20vw / 3.75);
				;
				color: #333333;
				line-height: calc(19vw / 3.75);
				;
				font-weight: 600;
				margin-bottom: calc(15vw / 3.75);
			}

			.main-box {
				border-radius: calc(10vw / 3.75);
				margin-bottom: calc(15vw / 3.75);

				.main-box_name {
					width: calc(350vw / 3.75);
					// .van-col{
					//     // width: calc(69vw / 3.75);
					//     height: calc(37vw / 3.75);
					//     text-align: center;
					//     flex: 1;
					//     background: #EFFCF2;
					//     line-height: calc(37vw / 3.75);
					//     font-size: calc(12vw / 3.75);;
					//     color: #333333;
					// }
				}

				.main-box_value {
					width: calc(350vw / 3.75);
					// .van-col{
					//     // width: calc(69vw / 3.75);
					//     height: calc(37vw / 3.75);
					//     line-height: calc(37vw / 3.75);
					//     text-align: center;
					//     flex: 1;
					//     background: #EFFCF2;
					//     font-size: calc(18vw / 3.75);;
					//     color: #F05D4F;
					//     font-weight: 600;
					// }
				}
			}

			.main-footer {
				width: calc(350vw / 3.75);
				display: flex;
				justify-content: center;
				align-items: center;
				// .van-button{
				//     width: calc(150vw / 3.75);
				//     height: calc(44vw / 3.75);
				//     border-radius: calc(25vw / 3.75);
				//     :deep(.van-button__text){
				//         font-size: calc(18vw / 3.75);;
				//         font-weight: 400;
				//         line-height: calc(24vw / 3.75);;

				//     }
				// }
			}
		}

		.footer {
			width: calc(350vw / 3.75);
			margin: calc(30vw / 3.75) calc(12vw / 3.75) calc(12vw / 3.75);
			padding-bottom: calc(99vw / 3.75);

			.footer-title {
				text-align: center;
				width: calc(350vw / 3.75);
				font-size: calc(20vw / 3.75);
				;
				color: #333333;
				line-height: calc(19vw / 3.75);
				font-weight: 600;
				margin-bottom: calc(15vw / 3.75);
			}

			.internalRoll {
				min-height: calc(10vw / 3.75);
				max-height: calc(200vw / 3.75);
				overflow-y: scroll;
			}
		}

		.footer-bottom {}

		.van-action-bar {
			height: 80px;
			margin: 0 calc(15vw / 3.75);
			// .van-button{
			//     height: calc(50vw / 3.75);;
			//     :deep(.van-button__text){
			//         font-size: calc(18vw / 3.75);
			//     }
			// }
		}
	}

	.mr-1 {
		margin-right: calc(1vw /3.75);
	}

	.mb-1 {
		margin-bottom: calc(1vw / 3.75);
	}

	.br-tf-10 {
		border-radius: calc(10vw / 3.75) 0 0 0;
	}

	.br-tr-10 {
		border-radius: 0 calc(10vw / 3.75) 0 0;
	}

	.br-br-10 {
		border-radius: 0 0 calc(10vw / 3.75) 0;
	}

	.br-bf-10 {
		border-radius: 0 0 0 calc(10vw / 3.75);
	}
</style>

<style lang="scss">
	.main {
		.main-box {
			background: #EFFCF2;
			border-radius: calc(10vw / 3.75);
			margin-bottom: calc(15vw / 3.75);

			.main-box_name {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: calc(350vw / 3.75);
				// width: calc(69vw / 3.75);
				height: calc(37vw / 3.75);
				text-align: center;
				flex: 1;
				background: #EFFCF2;
				line-height: calc(37vw / 3.75);
				font-size: calc(12vw / 3.75);
				;
				color: #333333;
			}

			.main-box_value {
				width: calc(350vw / 3.75);
				display: flex;
				justify-content: space-around;
				align-items: center;
				// width: calc(69vw / 3.75);
				height: calc(37vw / 3.75);
				line-height: calc(37vw / 3.75);
				text-align: center;
				flex: 1;
				background: #EFFCF2;
				font-size: calc(18vw / 3.75);
				;
				color: #F05D4F;
				font-weight: 600;
			}
		}
	}
</style>

<style lang="scss">
	.footer-main {
		background-color: #EFFCF2;
		margin: 0 20px;
		border-radius: 40upx;
		overflow: hidden;

		.van-tabs__scroll {
			background-color: #EFFCF2;
		}

		.van-tab--active {
			background-color: #00C47B;
			color: #fff;
		}

		.van-tabs__line {
			height: 0;
		}

		.footer-main-tabs-tab__content {
			flex: 1;
			text-align: center;
			font-size: 28upx;
			color: #999999;
			padding: 20upx 0;
		}

		.item_value {
			flex: 1;
			text-align: center;
			font-size: 28upx;
			color: #333333;
			padding: 20upx 0;

		}

		.r-color {
			color: #F05D4F;
		}
	}

	.flooter-btn {
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 130upx;
		text-align: center;
		background-color: #fff;
		.btn-share{
			width: 80%;
			height: 100upx;
			margin-top: 15upx;
			line-height: 100upx;
			text-align: center;
			font-size: 36upx;
			background-color: #F05D4F;
			border-radius: 50upx;
			color: #fff;
		}
	}
</style>